body {
    overflow: auto;
    box-sizing: border-box;
    margin: 0 auto;
    min-width: 375px;
    max-width: 750px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1;
    background-color: #ccc;
    -webkit-text-size-adjust: 100% !important;
    padding-bottom: env(safe-area-inset-bottom)
}

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

html {
    font-size: 75px;
}

* {
    margin: 0;
    padding: 0;
}

/* 头部 */
header {
    display: flex;
    justify-content: center;
    height: 3.7333rem;
    background: url(../images/bg.jpg) no-repeat;
    background-size: 100%;
    border-radius: 0px 0px .4rem .4rem;
}


input {
    color: #fff;
    margin-top: .2667rem;
    height: .6rem;
    width: 7.2rem;
    border-radius: .4667rem;
    border: 3px solid #fff;
    text-indent: 1em;
    background-color: transparent;
    font-size: .2667rem;
}

.my {
    margin-left: .9867rem;
    font-size: .2133rem;
    color: #a69794;
    width: .6667rem;
    height: 1rem;
}

.seach {
    height: 42px;
    width: 42px;
    background: url(../images/search.png) no-repeat 0 -73px;
}

.my span {
    margin-top: .1333rem;
    font-size: .2667rem;
    text-align: center;
    text-indent: .0667rem;
    display: flex;
}

/* 攻略景点 */
article {
    display: flex;
    margin: 0 .2667rem;
    background-color: #fff;
    height: 2.0933rem;
    padding: .48rem .36rem;
    border-radius: .4rem;
}

article ul {
    display: flex;
    flex: 20%;
}

article ul li {
    width: 20%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .2667rem;
    color: #404040;
}

.icon_span1 {
    height: .6667rem;
    width: .6667rem;
    background: url(../images/nav.png) no-repeat -19px -16px;
    margin-bottom: .2667rem;
}

.icon_span2 {
    height: .6667rem;
    width: .6667rem;
    background: url(../images/nav.png) no-repeat -11px -99px;
    margin-bottom: .2667rem;
}

.icon_span3 {
    height: 80px;
    width: .8rem;
    background: url(../images/nav.png) no-repeat -10px -169px;
}

.icon_span4 {
    height: .6933rem;
    width: .8rem;
    background: url(../images/nav.png) no-repeat -7px -255px;
    margin-bottom: .2667rem;
}

.icon_span5 {
    height: .8rem;
    width: .8667rem;
    background: url(../images/nav.png) no-repeat -6px -331px;
    margin-bottom: .1333rem;
}

/* 酒店机票旅游部分 */
nav {
    color: #fff;
    padding: 0 .2667rem;
    font-size: .32rem;
    margin-top: .2667rem;
}

nav ul>li {
    height: 1.7067rem;
    background-color: #f88451;
}

nav ul>li:nth-child(1) {
    border-radius: .2667rem .2667rem 0 0;
}

nav ul>li:nth-child(2) {
    background-color: #54a8ec;
    margin-top: .0667rem;
    margin-bottom: .0667rem;
    height: 1.8rem;
}

nav ul>li:nth-child(3) {
    background-color: #5fd179;
    height: 1.7867rem;
    border-radius: 0 0 .2667rem .2667rem;
}

.hotel {
    display: flex;
}

.hotel li:nth-child(1) {
    width: 3.0933rem;
}

.hotel li:nth-child(1) span {
    line-height: 1.6933rem;
    margin-left: .2667rem;
}

.hotel li:nth-child(2) {
    width: 2.6267rem;
    text-align: center;
    line-height: 1.6933rem;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
}

.hotel li:nth-child(3) {
    width: 3.4667rem;
    line-height: 1.6933rem;
    text-align: center;
}

.Air_ticket {
    display: flex;
    line-height: 1.8rem;
}

.Air_ticket li:nth-child(1) {
    width: 3.0933rem;
}

.Air_ticket li:nth-child(1) span {
    line-height: 1.6933rem;
    margin-left: .2667rem;
}

.Air_ticket li:nth-child(2) {
    width: 2rem;
    height: 1.8rem;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    text-align: center;
}

.Air_ticket li:nth-child(3) {
    width: 2rem;
    height: 1.8rem;
    text-align: center;
    border-right: 5px solid #fff;
}

.Air_ticket li:nth-child(4) {
    text-align: center;
    width: 2rem;
    height: 1.8rem;
}

/* 十个小图标 */
.tenicon {
    height: 3.3333rem;
    font-size: .32rem;
}

.tenicon ul {
    display: flex;
    flex-wrap: wrap;
}

.tenicon ul li {
    flex: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 1.52rem;
    color: #000;
}

.ten_icon {
    width: .6rem;
    height: .6rem;
    margin-bottom: .1333rem;
    background: url(../images/unicon2.png) no-repeat -6px -6px;
}

/* 底部部分 */
.bottom {
    height: 2.9467rem;
    font-size: .32rem;
    color: #000;
    background-color: #fff;
}

.bottom ul {
    display: flex;
}

.bottom ul li {
    flex: 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.bottom_icon {
    height: .5333rem;
    width: .5333rem;
    background: url(../images/unicon.png) no-repeat -119px -303px;
}

p {
    margin-top: .4rem;
    text-align: center;
}